<template>
  <div class="change-wrap">
    <div class="change-label">
      <span>{{ changeLabel }}</span>
      <el-switch :disabled="disabled" :value="value" :active-value="1" :inactive-value="0" @input="v=>$emit('input',v)" />
    </div>
    <div class="change-table" :class="{animation1:[1,'1'].includes(value)}">
      <div class="table-wrap">
        <p v-if="changeBeforeLabel">{{ changeBeforeLabel }}</p>
        <div>
          <slot name="before" />
        </div>
      </div>
      <div class="table-wrap">
        <p v-if="changeAfterLabel">{{ changeAfterLabel }}</p>
        <div>
          <slot name="after" />
        </div>
        <div v-if="showAddBtn" class="btn-wrap">
          <span @click.stop="handleClick">点击增加行</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChangeWrap',
  props: {
    changeLabel: {
      type: String,
      default: ''
    },
    changeBeforeLabel: {
      type: String,
      default: ''
    },
    changeAfterLabel: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0
    },
    showAddBtn: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick() {
      this.$emit('add')
    }
  }
}
</script>
<style lang="scss" scoped>
.change-wrap{
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  .change-label{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    &>span{
      padding-right: 10px;
      font-size: 12px;
    }
  }
  .change-table{
    padding-left: 20px;
    max-height: 0;
    transition: max-height 1s;
    overflow: hidden;
    .table-wrap{
      &>p{
        display: inline-block;
        font-size: 14px;
        font-weight: 700;
        color: #333;
        line-height: 30px;
        height: 30px;
        margin: 0;
        padding-right: 20px;
        border-bottom: 1px solid #ddd;
      }
      .btn-wrap{
        padding: 10px 0;
        &>span{
          display: inline-block;
          color: #16bc83;
          cursor: pointer;
        }
      }
    }
    .table-wrap + .table-wrap{
      margin-top: 10px;
    }
  }
}
.change-wrap + .change-wrap{
  margin-top: 10px;
}
.animation1 {
  max-height: 1000px !important;
}
</style>
